<template>
  <view class="page-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-back" @click="goBack">
        <wx-icon type="arrow-left" size="32" color="#303133"></wx-icon>
      </view>
      <view class="header-title">问题反馈</view>
    </view>
    
    <!-- 反馈内容区域 -->
    <view class="feedback-content">
      <view class="feedback-form">
        <!-- 问题类型 -->
        <view class="form-item">
          <view class="form-label">问题类型</view>
          <view class="form-select" @click="showTypePopup">
            <text>{{selectedType || '请选择问题类型'}}</text>
            <wx-icon type="arrow-right" size="28" color="#C0C4CC"></wx-icon>
          </view>
        </view>
        
        <!-- 问题描述 -->
        <view class="form-item">
          <view class="form-label">问题描述</view>
          <textarea 
            class="form-textarea" 
            v-model="feedbackDesc" 
            placeholder="请详细描述您遇到的问题，我们将尽快处理" 
            maxlength="500"
          ></textarea>
          <view class="char-count">{{feedbackDesc.length}}/500</view>
        </view>
        
        <!-- 联系方式 -->
        <view class="form-item">
          <view class="form-label">联系方式</view>
          <input 
            class="form-input" 
            v-model="contactInfo" 
            type="text" 
            placeholder="选填，便于我们联系您"
          >
        </view>
        
        <!-- 附件上传 -->
        <view class="form-item">
          <view class="form-label">附件上传</view>
          <view class="upload-area">
            <view v-for="(file, index) in uploadFiles" :key="index" class="upload-file">
              <image :src="file" mode="aspectFill"></image>
              <view class="file-delete" @click.stop="deleteFile(index)">
                <wx-icon type="close" size="24" color="#ffffff"></wx-icon>
              </view>
            </view>
            <view v-if="uploadFiles.length < 3" class="upload-placeholder" @click="chooseImage">
              <wx-icon type="add" size="36" color="#909399"></wx-icon>
              <text>添加图片</text>
            </view>
          </view>
        </view>
        
        <!-- 提交按钮 -->
        <view class="form-submit">
          <button 
            class="submit-btn" 
            :class="{ 'btn-loading': isSubmitting }"
            @click="submitFeedback"
            :loading="isSubmitting"
          >
            提交反馈
          </button>
        </view>
      </view>
    </view>
    
    <!-- 问题类型选择弹窗 -->
    <view v-if="showTypePopup" class="popup-mask" @click.stop="hideTypePopup">
      <view class="popup-content type-popup">
        <view class="popup-header">
          <text class="popup-title">选择问题类型</text>
        </view>
        <view class="popup-body">
          <view class="type-list">
            <view 
              v-for="(type, index) in feedbackTypes" 
              :key="index" 
              class="type-item"
              :class="{ 'type-item-selected': selectedType === type }"
              @click="selectType(type)"
            >
              {{type}}
              <view v-if="selectedType === type" class="selected-icon">
                <wx-icon type="success" size="24" color="#409EFF"></wx-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideTypePopup">取消</view>
        </view>
      </view>
    </view>
    
    <!-- 提交成功提示弹窗 -->
    <view v-if="showSuccessPopup" class="popup-mask" @click.stop="hideSuccessPopup">
      <view class="popup-content success-popup">
        <view class="success-icon">
          <wx-icon type="success" size="64" color="#4CAF50"></wx-icon>
        </view>
        <view class="popup-body">
          <text class="success-message">反馈提交成功！</text>
          <text class="success-submessage">我们会尽快处理您的反馈</text>
        </view>
        <view class="popup-footer">
          <view class="popup-btn confirm" @click="goBack">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 状态管理
const showTypePopup = ref(false);
const showSuccessPopup = ref(false);
const isSubmitting = ref(false);
const selectedType = ref('');
const feedbackDesc = ref('');
const contactInfo = ref('');
const uploadFiles = ref<Array<string>>([]);
const feedbackTypes = ref([
  '功能建议',
  '使用问题',
  'bug反馈',
  '账号问题',
  '其他问题'
]);

// 页面加载时的初始化操作
onMounted(() => {
  // 可以在这里添加页面加载时的逻辑
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 显示问题类型选择弹窗
const showTypePopupFunc = () => {
  showTypePopup.value = true;
};

// 隐藏问题类型选择弹窗
const hideTypePopup = () => {
  showTypePopup.value = false;
};

// 选择问题类型
const selectType = (type: string) => {
  selectedType.value = type;
  hideTypePopup();
};

// 选择图片
const chooseImage = () => {
  if (uploadFiles.value.length >= 3) {
    uni.showToast({
      title: '最多只能上传3张图片',
      icon: 'none'
    });
    return;
  }
  
  uni.chooseImage({
    count: 3 - uploadFiles.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      uploadFiles.value = [...uploadFiles.value, ...res.tempFilePaths];
    }
  });
};

// 删除已上传的文件
const deleteFile = (index: number) => {
  uploadFiles.value.splice(index, 1);
};

// 提交反馈
const submitFeedback = () => {
  // 验证表单
  if (!selectedType.value) {
    uni.showToast({
      title: '请选择问题类型',
      icon: 'none'
    });
    return;
  }
  
  if (!feedbackDesc.value.trim()) {
    uni.showToast({
      title: '请描述您的问题',
      icon: 'none'
    });
    return;
  }
  
  // 显示加载状态
  isSubmitting.value = true;
  
  // 模拟提交反馈（实际项目中应替换为真实的API请求）
  setTimeout(() => {
    isSubmitting.value = false;
    showSuccessPopup.value = true;
  }, 1500);
};

// 隐藏提交成功弹窗
const hideSuccessPopup = () => {
  showSuccessPopup.value = false;
};
</script>

<style scoped>
/* 全局样式 (继承自设置页面，此处仅添加新增样式) */

/* 反馈内容区域 */
.feedback-content {
  padding: 30rpx 40rpx;
  background-color: #F5F7FA;
}

.feedback-form {
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;
}

/* 表单元素公共样式 */
.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #606266;
  margin-bottom: 16rpx;
}

/* 问题类型选择 */
.form-select {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F5F7FA;
}

.form-select text {
  flex: 1;
  font-size: 32rpx;
  color: #303133;
}

/* 问题描述文本框 */
.form-textarea {
  width: 100%;
  height: 240rpx;
  border: 1rpx solid #E5E6EB;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  color: #303133;
  background-color: #F9F9F9;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #909399;
  margin-top: 8rpx;
}

/* 输入框 */
.form-input {
  width: 100%;
  height: 88rpx;
  border: 1rpx solid #E5E6EB;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  color: #303133;
  background-color: #F9F9F9;
}

/* 附件上传区域 */
.upload-area {
  display: flex;
  flex-wrap: wrap;
}

.upload-file {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  position: relative;
  border-radius: 8rpx;
  overflow: hidden;
}

.upload-file image {
  width: 100%;
  height: 100%;
}

.file-delete {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-placeholder {
  width: 160rpx;
  height: 160rpx;
  border: 1rpx dashed #DCDFE6;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F9F9F9;
}

.upload-placeholder wx-icon {
  margin-bottom: 10rpx;
}

.upload-placeholder text {
  font-size: 24rpx;
  color: #909399;
}

/* 提交按钮 */
.form-submit {
  margin-top: 40rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #409EFF;
  color: white;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn.btn-loading {
  opacity: 0.8;
}

/* 问题类型选择弹窗 */
.type-popup .popup-body {
  padding: 0;
}

.type-list {
  padding: 20rpx 0;
}

.type-item {
  padding: 24rpx 40rpx;
  font-size: 32rpx;
  color: #303133;
  border-bottom: 1rpx solid #F5F7FA;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-item:last-child {
  border-bottom: none;
}

.type-item-selected {
  color: #409EFF;
}

.selected-icon {
  width: 24rpx;
  height: 24rpx;
}

/* 提交成功弹窗 */
.success-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 0 20rpx;
}

.success-message {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10rpx;
}

.success-submessage {
  font-size: 28rpx;
  color: #909399;
}
</style>